<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>danmu.js</title>
    <style>
      html {
        width: 100%;
        height: 100%;
      }
      body {
        width: 100%;
        height: 100%;
      }
      #wrap {
        position: absolute;
        left: 0;
        width: 1280px;
        height: 337px;
      }
      #vs {
        position: absolute;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 9999;
      }
      #mse {
        position: absolute;
        left: 0;
        width: 100%;
        height: 100%;
      }
      #btnwrap {
        position: absolute;
        right: 20px;
        top: 400px;
      }
    </style>
  </head>
  <body>
    <div id="wrap">
      <div id="vs"></div>
      <video id="mse" autoplay="true" muted playsinline controls="controls">
        <source
          src="//s1.pstatp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo.mp4"
          type="video/mp4"
        />
        your browser does not support the video tag
      </video>
    </div>
    <div id="btnwrap">
      <div>
        <button onclick="start()">弹幕开始</button>
        <button onclick="pause()">弹幕暂停</button>
        <button onclick="play()">弹幕播放</button>
        <button onclick="stop()">弹幕结束</button>
      </div>
      <div>
        <input type="text" id="opacity" placeholder="透明度" />
        <button onclick="setOpacity()">改变透明度</button>
      </div>
      <div>
        <input type="text" id="size" placeholder="改变大小" />
        <button onclick="setFontSize()">改变大小</button>
      </div>

      <div>
        <input type="text" id="duration" placeholder="改变duration" />
        <button onclick="setAllDuration()">改变duration</button>
      </div>
      <!-- <div>
        <button onclick="setArea()">改变弹幕区域</button>
      </div> -->
      <div>
        <input type="text" id="comment" placeholder="输入弹幕内容" />
        <button onclick="sendComment()">发送弹幕</button>
      </div>
      <div>
        <!-- <input type="text" id="hidetype" placeholder="输入要屏蔽的弹幕类型"/>
        <button onclick="hide()">隐藏</button>
        <button onclick="show()">显示</button> -->
      </div>
      <div>
        <!-- <input type="text" id="commentid" placeholder="输入弹幕id"/>
        <button onclick="setCommentLike()">设置某个弹幕点赞text</button> -->
        <!-- <input type="text" id="duration" placeholder="输入弹幕duration"/>
        <input type="text" id="commentnewid" placeholder="输入弹幕新id"/>
        <button onclick="setCommentDuration()">设置某个弹幕duration</button>
        <button onclick="setAllDuration()">设置所有弹幕duration</button>
        <button onclick="setCommentID()">设置某个弹幕id</button> -->
      </div>

      <!-- <button onclick="toggleFullscreen()">切换全屏状态</button>
      <button onclick="toggleDirection()">切换弹幕方向</button>
      <button onclick="toggleArea()">切换弹幕区域</button> -->
    </div>
    <!-- <script src="//cdn.jsdelivr.net/npm/danmu.js@0.2.5/browser/index.js" charset="utf-8"></script> -->
    <script src="../browser/index.js" charset="utf-8"></script>
    <script type="text/javascript">
      let el = createDom(
        "xg-el",
        '弹幕弹幕弹幕<img src="./grinning-face.png" />弹幕弹幕',
        {},
        "xgplayer-el"
      );
      let wrap = document.getElementById("wrap");
      let player = document.getElementById("mse");
      let direction = "r2l";

      let like = document.createElement("span");
      like.innerText = "10w+";

      let danmu = new window.DanmuJs({
        interval: 1500,
        mouseControl: true,
        mouseControlPause: false,
        container: document.getElementById("vs"),
        containerStyle: {
          zIndex: 100,
        },
        live: true,
        player,
        direction,
        comments: [
          {
            duration: 5000,
            start: 0,
            id: 1 + "",
            txt: 1 + "", //弹幕文字内容
            style: {
              fontSize: "20px",
            },
          },
        ],
        fontSize: 32.8,
        area: {
          start: 0,
          end: 0.5,
        },
      });
      danmu.on("bullet_pause", function (data) {
        console.log(data);
      });

      danmu.on("bullet_hover", function (data) {
        // console.log(data.event)
        // danmu.freezeComment(data.bullet.id)
        // setTimeout(function () {
        //   danmu.restartComment(data.bullet.id)
        // }, 4000)
      });
      function start() {
        danmu.start();
        let id = 1;
        setInterval(function () {
          id++;
          let like = document.createElement("span");
          like.innerText = "10w+";
          // console.log(document.getElementById('duration').value || 5000)
          danmu.sendComment({
            //发送弹幕
            duration: document.getElementById("duration").value || 5000,
            id: id + "",
            txt: id + "", //弹幕文字内容
            style: {
              fontSize: "25px",
              lineHeight: 1.125,
              color: "#000",
            },
            originData: {
              x: "2121",
            },
            like: {
              el: like,
              style: {
                paddingLeft: "10px",
                color: "#ff0000",
              },
            },
          });
        }, 100);
      }

      function play() {
        danmu.play();
      }

      function pause() {
        danmu.pause();
      }

      function stop() {
        danmu.stop();
      }

      function sendComment() {
        let comment = document.getElementById("comment").value;
        danmu.sendComment({
          duration: document.getElementById("duration").value || 5000,
          id: 10000000,
          prior: true,
          realTime: true,
          txt: comment,
          style: {
            color: "#000",
            fontSize: "25px",
            padding: "5px 12px",
            fontSize: "25px",
            lineHeight: 1.125,
          },
          like: {
            el: like,
            style: {
              color: "#ff0000",
            },
          },
        });
      }

      function setOpacity() {
        let opacity = document.getElementById("opacity").value;
        danmu.setOpacity(opacity);
      }
      function setFontSize() {
        let size = document.getElementById("size").value;
        danmu.setFontSize(size, (size * 41) / 25);
      }

      function setAllDuration() {
        let duration = document.getElementById("duration").value;
        danmu.setAllDuration(duration);
      }

      function setArea() {
        danmu.setArea({
          start: 0,
          end: 0.5,
        });
      }

      function setCommentLike() {
        let id = document.getElementById("commentid").value;
        danmu.setCommentLike(id, {
          el: like,
          style: {
            paddingLeft: "10px",
            color: "#ff0000",
          },
        });
      }

      function setCommentDuration() {
        let id = document.getElementById("commentid").value;
        let duration = document.getElementById("duration").value;
        danmu.setCommentDuration(id, duration);
      }

      function setAllDuration() {
        let duration = document.getElementById("duration").value;
        danmu.setAllDuration("scroll", duration);
      }

      function hide() {
        let type = document.getElementById("hidetype").value;
        danmu.hide(type);
        console.log(type);
      }

      function show() {
        let type = document.getElementById("hidetype").value;
        danmu.show(type);
      }

      function setCommentID() {
        let id = document.getElementById("commentid").value;
        let newid = document.getElementById("commentnewid").value;
        danmu.setCommentID(id, newid);
      }

      let getFullscreen = function (el) {
        if (el.requestFullscreen) {
          el.requestFullscreen();
        } else if (el.mozRequestFullScreen) {
          el.mozRequestFullScreen();
        } else if (el.webkitRequestFullscreen) {
          el.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
        } else if (player.webkitSupportsFullscreen) {
          player.webkitEnterFullscreen();
        } else if (el.msRequestFullscreen) {
          el.msRequestFullscreen();
        }
      };
      let exitFullscreen = function () {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitExitFullscreen) {
          document.webkitExitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      };

      let isFullscreen = false;
      function toggleFullscreen() {
        if (isFullscreen) {
          exitFullscreen();
        } else {
          getFullscreen(wrap);
        }
        isFullscreen = !isFullscreen;
      }

      function toggleDirection() {
        danmu.stop();
        if (direction === "r2l") {
          danmu.setDirection("b2t");
          direction = "b2t";
        } else {
          danmu.setDirection("r2l");
          direction = "r2l";
        }
        danmu.start();
      }

      let area = 1;
      function toggleArea() {
        if (area === 1) {
          area = 2;
        } else if (area === 2) {
          area = 3;
        } else if (area === 3) {
          area = 4;
        } else if (area === 4) {
          area = 1;
        }
        danmu.config.area.end = (5 - area) / 4;
        danmu.bulletBtn.main.channel.resetArea();
      }

      function createDom(el = "div", tpl = "", attrs = {}, cname = "") {
        let dom = document.createElement(el);
        dom.className = cname;
        dom.innerHTML = tpl;
        Object.keys(attrs).forEach((item) => {
          let key = item;
          let value = attrs[item];
          if (el === "video" || el === "audio") {
            if (value) {
              dom.setAttribute(key, value);
            }
          } else {
            dom.setAttribute(key, value);
          }
        });
        return dom;
      }
    </script>
  </body>
</html>
